<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
</head>
<body>
<div v-show="true">
    <h1>测试条件渲染v-show</h1>
</div>

<div>
    <div v-if="true">
        <h1>测试条件渲染v-if</h1>
    </div>
</div>

<div id="show">
    <div v-show="show">
        <h1>测试条件渲染v-if</h1>
    </div>
    <button @click="show = !show">点击我转变状态</button>
</div>

<div id="if">
    <div v-if="ifShow">
        <h1>测试条件渲染v-if</h1>
    </div>
    <button @click="ifShow = !ifShow">点击我转变状态</button>
</div>
</body>

<script src="script/vue.js"></script>
<script>
    let app = new Vue({
        el: '#show',
        data: {
            show: true
        }
    })
    new Vue({
        el:'#if',
        data:{
            ifShow: true
        }
    })
</script>

</html>